<template>
  <div class="login-wrap">
    <el-form class="login-form" label-position="top" label-width="80px" :model="formData">
      <h2>用户登录</h2>
      <el-form-item label="用户名">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formData.password"></el-input>
      </el-form-item>
      <el-button
        @click.prevent="doLogin()"
        class="login-button" type="primary">登录
      </el-button>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data () {
      return {
        formData: {
          username: '',
          password: ''
        }
      }
    },
    methods: {
      async doLogin () {
        const res = await this.$http.post('login', this.formData)
        console.log(res)
        const {data, meta: {msg, status}} = res.data
        if (status === 200) {
          sessionStorage.setItem('token', data.token);
          this.$router.push({name: 'Home'})
          this.$message.success(msg)
        } else {
          this.$message.error(msg)
        }
      },
      // doLogin() {
      //   this.$http.post("login", this.formData).then((res) => {
      //     console.log(res)
      //     const {date, meta:{msg, status}} = res.data
      //     if (status === 200) {
      //       this.$router.push({name:'home'})
      //       this.$message.success(msg)
      //     } else {
      //       this.$message.error(msg)
      //     }
      //   });
      // }
    }

  }
</script>

<style scoped>
  .login-wrap {
    background-color: #324152;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .login-wrap .login-form {
    background-color: #fff;
    width: 400px;
    padding: 30px;
    border-radius: 5px;
  }

  .login-wrap .login-form .login-button {
    width: 100%;
  }
</style>
